<template>
  <div class="nav">
    <div class="navbar banxin">
      <ul>
        <li><span class="active">推荐</span></li>
        <li @click="$router.push('/home/paihangban')"><span>排行榜</span></li>
        <li ><span>歌单</span></li>
        <li><span>主播电台</span></li>
        <li><span>歌手</span></li>
        <li><span>新碟上架</span></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.nav {
  height: 35px;
  background-color: #C20C0C;
  box-sizing: border-box;
  .navbar {
    height: 35px;
    ul {
      display: flex;
      line-height: 32px;
      padding-left: 180px;
      color: #fff;
      li {
        cursor: pointer;
        span {
          display: inline-block;
          height: 20px;
          line-height: 20px;
          margin: 7px 17px;
          padding: 0 13px;
          &:hover {
            background: #9b0909;
            border-radius: 20px;
          }
          &.active {
            background: #9b0909;
            border-radius: 20px;
          }
        }
      }
    }
  }
}
</style>